<template>
  <div class="certificate">
    <MyTabs :tab-list="tabList"></MyTabs>
    <div class="screen">
      <el-input v-model="ceatTitle" placeholder="证书名称" size="mini"></el-input>
      <el-date-picker
        v-model="ceattime"
        type="daterange"
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束日期"
        value-format="timestamp"
        size="mini"
      >
      </el-date-picker>
      <el-button type="primary" size="mini" @click="handleScreenSubmit">筛选</el-button>
      <el-button type="text" size="mini" @click="handleScreenReset">重置</el-button>
    </div>
    <el-table :data="tableData" size="mini" header-row-class-name="table-header">
      <el-table-column prop="cert_title" label="证书名称" width="200" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="code" label="证书编号"></el-table-column>
      <el-table-column label="获得时间">
        <template v-slot="{ row }">
          {{ row.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column>
      <el-table-column prop="course_title" label="来源" width="240" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template v-slot="{ row }">
          <el-button
            type="text"
            size="small"
            @click="
              $router.push({
                path: '/my/study/certificate/' + row.id
              })
            "
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
export default {
  components: {
    MyTabs
  },
  data() {
    return {
      tabList: [
        {
          title: '我的证书'
        }
      ],
      tableData: [],
      ceatTitle: '',
      ceattime: null,
      params: {}
    }
  },
  created() {
    this.getStudentCert()
  },
  methods: {
    getStudentCert() {
      this.$api.getCourseStudentCert(this.params, res => {
        const { data } = res
        this.tableData = data
      })
    },
    handleScreenSubmit() {
      let query = {
        title: this.ceatTitle
      }
      if (this.ceattime) {
        query = {
          ...query,
          start_time: this.ceattime[0] / 1000,
          end_time: this.ceattime[1] / 1000
        }
      }
      this.params = this.delObjectEmpty(query)
      this.getStudentCert()
    },
    handleScreenReset() {
      this.ceatTitle = ''
      this.ceattime = null
    },
    // 去除对象的空值
    delObjectEmpty(data) {
      return Object.keys(data)
        .filter(key => data[key])
        .reduce((acc, key) => ({ ...acc, [key]: data[key] }), {})
    }
  }
}
</script>

<style lang="scss" scoped>
.certificate {
  .screen {
    display: flex;
    margin-bottom: 20px;
    .el-input {
      width: 140px;
    }
    .el-date-editor,
    .el-button {
      margin-left: 10px;
    }
  }
}

.el-table {
  ::v-deep .table-header th {
    background-color: #f6f9ff;
  }
}
</style>
